<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="130px" inline>
            <el-form-item label="场地名称" label-width="100px">
                <el-input v-model="form.name" clearable placeholder="ID/姓名/电话/身份证号" size="small" />
            </el-form-item>
            <el-form-item label="场地地址">
                <el-input v-model="form.name" clearable placeholder="ID/姓名/电话/身份证号" size="small" />
            </el-form-item>
            <el-form-item label="场地状态">
                <el-select v-model="form.name" placeholder="请选择" style="width: 202px" size="small">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="备案状态">
                <el-select v-model="form.name" placeholder="请选择" style="width: 202px" size="small">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search">查询</el-button>
                <el-button size="small" type="success" icon="el-icon-plus">新增</el-button>
                <el-button size="small" type="info" plain>导出</el-button>
                <el-button size="small" type="info" plain>视频演示</el-button>
            </el-form-item>

            <el-form-item label="批量设置备案" label-width="100px">
                <el-select v-model="form.name" placeholder="请选择" style="width: 202px" size="small">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                </el-select>
            </el-form-item>

            <el-form-item label="备案时间" label-width="110px">
                 <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.name" type="date"
                  placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary">设置</el-button>
            </el-form-item>
        </el-form>

        <div style="height: 635px;">
            <el-table :data="tableData" border height="100%" :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column width="50" type="selection" align="center" />

                <el-table-column sortable prop="date" type="index" label="序号" width="80" align="center" />

                <el-table-column sortable prop="ID" label="ID" width="80" align="center">
                    <template slot-scope="scope">
                        <span style="color: blue;cursor: pointer;" @click="go(scope.row)">{{ scope.row.ID }}</span>
                    </template>
                </el-table-column>

                <el-table-column sortable prop="name" label="场地名称" width="150" align="center" />

                <el-table-column sortable prop="sex" label="场地地址" width="220" align="center" />

                <el-table-column sortable prop="car" label="教练场性质" width="150" align="center" />

                <el-table-column sortable prop="statestr" label="可容纳车辆数" width="180" align="center" />
                <el-table-column sortable prop="newState" label="已投入车辆数" width="200" align="center">  </el-table-column>

                <el-table-column sortable prop="tel" label="场地面积" width="150" align="center" />

                <el-table-column sortable prop="beforecartype" label="培训车型" width="150" align="center" />

                <el-table-column sortable prop="idcard" label="土地租赁开始时间" width="220" align="center" />

                <el-table-column sortable prop="money" label="土地租赁结束时间" width="220" align="center" />

                <el-table-column sortable prop="act_money" label="联系人" width="120" align="center" />

                <el-table-column sortable prop="lost_money" label="联系电话" width="120" align="center" />

                <el-table-column sortable prop="moneyYH" label="备案状态" width="120" align="center" />

                <el-table-column sortable prop="zkz" label="备案时间" width="180" align="center" />

                <el-table-column sortable prop="supervisionOut" label="修改人" width="120" align="center" />

                <el-table-column sortable prop="supervisionIn" label="修改日期" width="120" align="center" />

                <el-table-column sortable prop="other_money" label="录入人" width="150" align="center" />

                <el-table-column sortable prop="other_act_money" label="录入日期" width="150" align="center" />
                <el-table-column sortable label="操作" width="150" align="center" >
                    <template>
                        <el-button>删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagin">
          <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
            :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-12-11 15:35:31  星期一
* @description   场地管理
**/


export default {
    data() {
        return {
            form: {
                name: ''
            },
            tableData: [],
            initParams: {
                page: 1,
                pageSize: 20,
            },
            // 分页总条数
            total: 0,
        }
    },
    methods: {
        // 当前显示的条数 发生改变时触发
        handleSizeChange(pageSize) {
            this.initParams.pageSize = pageSize || 20
            this.getListData()
        },
        // 当前页码发生改变时触发
        handleCurrentChange(page) {
            this.initParams.page = page || 1
            this.getListData()
        },
    }
}
</script>

<style lang="scss" scoped></style>